<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script type="text/javascript" src="../js/jquery-1.4.2.js"></script>
<script type="text/javascript">
           $(function () {
               //给所有多选框添加事件
               $("input").click(function () {
                   //判断出多选
                   if(this.id=="c5"){
                       //让其他的几个多选状态和c5状态一样
                       $(this).siblings("input").attr("checked",this.checked);
                   }
                   //统计总价
                   var total = 0;
                   //得到四个对选框
                   $("input:not(#c5)").each(function(){
                        if(this.checked){
                            total += parseInt(this.value);
                        }
                   });
                   //显示到p
                    $("p").text("总价:"+total+"元");
               });
           });

</script>
</head>
<body>
<h3>订单练习</h3>
<input type="checkbox" id="c1"  value="20">
<label for="c1">鼠标20元</label><br>
<input type="checkbox" id="c2"  value="80">
<label for="c2">键盘80元</label><br>
<input type="checkbox" id="c3"  value="5000">
<label for="c3">华为P305000元</label><br>
<input type="checkbox" id="c4"  value="2000">
<label for="c4">苹果XP2000元</label><br>
<input type="checkbox" id="c5">
<label for="c5">全选</label><br>
<p>总价:0元</p>
</body>
</html>